<template>
  <div class="detailSign">
    <swiper class="swiper" :imgList="imgList"></swiper>
    <div class="wrap">
      <!-- 报名方式 -->
      <div class="form-item">
        <p class="way">报名方式</p>
        <p class="name">运动员姓名</p>
        <input name="input" type="text" v-model="nameValue" placeholder="请填写您的真实姓名"
               class="input-name"/>
        <p class="phone">手机号</p>
        <input name="input" type="number" v-model="phoneValue" placeholder="请填写有效手机号码"
               class="input-phone"/>
      </div>
      <!-- 参加项目 -->
      <div class="form-item">
        <div class="items">参加项目</div>
        <div class="items-total">
          <div class="left">总项</div>
          <div class="right">
            <p class="picker right-text">
              dd
            </p>
            <img src="../../../assets/images/find/001.png" class="selec-icon">
          </div>
        </div>
        <div class="items-total">
          <div class="left">分项</div>
          <div class="right">
            <p class="picker right-text">
              dd
            </p>
            <img src="../../../assets/images/find/001.png" class="selec-icon">
          </div>
        </div>
      </div>
      <!-- 报名费用 -->
      <div class="form-money">
        <p class="money-left">报名费用</p>
        <p class="money-text">￥ {{prize}}</p>
      </div>
      <!-- 声明 -->
      <div class="form-declare">
        <p class="declare-text">
          关于比赛安全财产和伤害等问题责任确认：<br>
          提请所有参赛选手到保险公司投保，参加比赛时发生伤害问题，<br>
          由参赛者自行通过保险公司解决，
          主办单位不负责理赔。
        </p>
      </div>
      <!-- 同意 -->
      <div class="form-agree" @click="agreeApply">
        <img class="agree-img" :src="agreeFlag?agreeYes:agreeNo">
        <p class="agree-text">本人同意并悉知上诉内容</p>
      </div>
    </div>
    <div class="fixed" @click="sureApply">
      <p>确认报名</p>
    </div>
  </div>
</template>

<script>
  import Swiper from '@/components/swiper/Swiper'
  import {config, _isPhoneNumber} from '@/util/config'
  import {Toast} from 'vant';
  import axios from 'axios'

  export default {
    name: "detailSign",
    data() {
      return {
        id: '',
        prize: 0,
        imgList: [],
        nameValue: '',
        phoneValue: '',
        agreeFlag: false,
        agreeYes: require("../../../assets/images/find/002-active.png"),
        agreeNo: require("../../../assets/images/find/002.png"),
      }
    },
    components: {
      Swiper
    },
    mounted() {
      this.imgList = this.$route.params.imgList;
      this.prize = this.$route.params.prize;
    },
    methods: {
      // 同意条例
      agreeApply() {
        this.agreeFlag = !this.agreeFlag;
      },
      // 数据请求
      sureApply() {
        let that = this
        let id = that.$route.params.id;
        let name = that.nameValue
        let phone = that.phoneValue
        let totalValue = that.zongId
        let markValue = that.fenId
        if (name === "" || phone === "") {
          Toast('信息不能为空');
        }
        else if (!_isPhoneNumber(phone)) {
          Toast('手机号码有误');
          that.phoneValue = '';
        }
        else if (!that.agreeFlag) {
          Toast('同意协议才能报名');
        }
        else {
          axios.post('/api/sportslist', {
            memberid: config.memberid,
            sportid: id,
            itemid: 26,
            name: name,
            phone: phone
          }).then((res) => {
            Toast.success('报名成功');
            setTimeout(() => {
              Toast.clear();
              this.$router.push('/find');
            }, 2000);
          })
        }
      },
    }
  }


</script>

<style scoped lang="less">
  .detailSign {
    /deep/ .wc-pagination {
      display: none !important
    }
    /deep/ .swiper {
      height: 235px !important;
    }
    .wrap {
      margin-bottom: 120px;
      padding: 15px;
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-size: 14px;
        color: #666;
        .way, .items {
          font-size: 14px;
          padding: 3px 12px 3px 12px;
          background: #1bbacd;
          border-radius: 2px;
          text-align: center;
          color: #fff;
          margin-bottom: 16px;
        }

        .input-name, .input-phone {
          width: 100%;
          height: 30px;
          background: #f5f5fa;
          border: 1px solid #e6e6ed;
          border-radius: 5px;
          padding: 0 8px;
          box-sizing: border-box;
          margin: 10px 0;
          font-size: 14px;
        }

        .items {
          margin-top: 10px;
        }

        .items-total, .items-mark {
          display: flex;
          width: 100%-4px;
          align-items: center;
          margin: 8px;
          .left {
            width: 40px;
            font-size: 12px;
            text-align: left;
            color: #666;
          }
          .right {
            flex: 1;
            position: relative;
            .right-text {
              padding-left: 10px;
              text-align: left;
              height: 30px;
              line-height: 30px;
              background: #fff;
              border: 1px solid #e6e6ed;
              border-radius: 5px;
              box-sizing: border-box;
              font-size: 14px;
              color: #666;
            }
            .selec-icon {
              width: 28px;
              height: 30px;
              position: absolute;
              right: 0;
              top: 0;
            }
          }
        }

      }
      .form-money {
        margin-top: 20px;
        height: 35px;
        display: flex;
        border-bottom: 1px solid #cdcdd3;
        box-sizing: border-box;
        justify-content: space-between;
        .money-left {
          font-size: 14px;
          color: #666;
        }

        .money-text {
          font-size: 14px;
          color: #666;
        }
      }
      .form-declare {
        line-height: 150%;
        margin-top: 14px;
        width: 100%;
        font-size: 12px;
        color: #708bce;
        text-align: justify;
      }
      .form-agree {
        width: 100%;
        text-align: left;
        margin-top: 14px;
        font-size: 0;
        .agree-img {
          width: 16px;
          height: 16px;
          display: inline-block;
          vertical-align: middle;
        }
        .agree-text {
          font-size: 12px;
          color: #666;
          margin-left: 5px;
          display: inline-block;
          vertical-align: middle;
        }

      }
    }

    .fixed {
      width: 100%;
      height: 42px;
      line-height: 42px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      bottom: 0;
      left: 0;
      position: fixed;
      background: #708bce;
    }

  }
</style>
